<template>
  <div class="df_login">
    <div class="logon_form">
      <div class="form_fl">
        <img src="../../assets/image/login/login_fl.png" alt="" />
      </div>
      <div class="form_fr">
        <div class="form_tag">
          <div
            :class="currTag == 1 ? 'curr_form_tag' : ''"
            @click="currTag = 1"
          >
            手机号登录
          </div>
          <div
            :class="currTag == 2 ? 'curr_form_tag' : ''"
            @click="currTag = 2"
          >
            账号密码登录
          </div>
        </div>
        <!-- 账号密码登录 -->
        <div class="fr_pass_con" v-if="currTag == 2">
          <div class="fr_logo">
            <img src="../../assets/image/login/logo.png" alt="" />
          </div>
          <div class="fr_form">
            <div class="form_item">
              <img
                style="width: 0.24rem"
                src="../../assets/image/login/user.png"
                alt=""
              />
              <input
                type="text"
                v-model="username"
                placeholder="请输入用户名"
              />
            </div>
            <div class="form_item">
              <img
                style="width: 0.16rem; left: 0.06rem"
                src="../../assets/image/login/pass.png"
                alt=""
              />
              <input
                type="password"
                v-model="password"
                placeholder="请输入密码"
              />
            </div>
            <div class="form_forget">
              <div class="forget_fl">
                <i
                  class="choice"
                  v-show="!$store.state.rememberMy"
                  @click="choice(true)"
                ></i>
                <img
                  @click="choice(false)"
                  v-show="$store.state.rememberMy"
                  src="../../assets/image/login/select.png"
                  alt=""
                />
                记住我
              </div>
              <div
                class="forget_fr"
                @click="$router.push({ name: 'forgetPass' })"
                style="cursor: pointer"
              >
                忘记密码？
              </div>
            </div>
          </div>
        </div>

        <!-- 手机号登录 -->
        <div class="phone_login" v-else>
          <div class="fr_logo">
            <img src="../../assets/image/login/logo.png" alt="" />
          </div>
          <div class="fr_form">
            <div class="form_item">
              <img
                style="width: 0.2rem"
                src="../../assets/image/login/phone.png"
                alt=""
              />
              <input
                type="text"
                ref="phone"
                v-model="phone"
                placeholder="请输入手机号"
              />
            </div>
            <div class="form_item">
              <img
                style="width: 0.22rem"
                src="../../assets/image/login/code.png"
                alt=""
              />
              <input
                type="text"
                v-model="code"
                placeholder="请输入验证码"
              />
              <span @click="codeBtn">{{ codeNum | codeNum }}</span>
            </div>
          </div>
        </div>
        <div class="btn_con">
          <div class="login_btn" @click="loginBtn">登录</div>
          <div class="register">
            <span>没有账号？</span>
            <span
              style="cursor: pointer"
              @click="$router.push({ name: 'register' })"
              >立即注册</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 校验手机号
import { isPoneAvailable } from "@/config/utils";
import { replacePage } from "@/config/utils";
import mixin from "@/config/mixin";

export default {
  mixins: [mixin],
  name: "login",
  data() {
    return {
      // 验证码倒计时
      codeNum: "获取验证码",
      username: "",
      password: "",
      // 当前高亮
      currTag: 1,
      phone: "",
      code: "",
    };
  },
  methods: {
    loginBtn() {
      let data;
      // 手机号登录
      if (this.currTag == 1) {
        data = {
          type: 1,
          phone: this.phone,
          code: this.code,
        };
      } else {
        // 账号密码登录
        data = {
          type: 2,
          username: this.username,
          password: this.password,
        };
      }

      this.$request({
        url: "login",
        method: "POST",
        data,
      }).then(({ data }) => { 
        this.$store.commit("setToken", data.data.token);
        this.$store.commit("setUserInfo", {
          data: { userInfo: data.data.user_info, token: data.data.token },
        });
        if (data.code === 200) {
          this.$message({
            type: "success",
            message: "登录成功！",
          });
          replacePage("/", 1000);
        }
      });
    },
    // 记住我
    choice(data) {
      this.$store.commit("setRememberMy", data);
    },
    codeBtn() {
      // 手机号校验
      if (!this.phone) {
        return this.$message({ message: "手机号不能为空！", type: "error" });
      }
      if (!isPoneAvailable(this.phone)) {
        return this.$message({
          message: "请输入正确的手机号！",
          type: "error",
        });
      }
      // 发送验证码
      this.$request({
        method: "POST",
        url: "send_sms",
        data: {
          phone: this.phone,
          name: "forget_password",
        },
      }).then(({ data }) => {
        if (data.code === 200) {
          // this.adoptCode = true;
          this.$message({ message: "信息发送成功！", type: "success" });
          if (this.codeNum === "获取验证码") {
            this.codeNum = 60;
            let codeTime = setInterval(() => {
              this.codeNum -= 1;
              if (this.codeNum === 0) {
                clearInterval(codeTime);
                this.codeNum = "获取验证码";
              }
            }, 1000);
          }
        }
      });
    },
  },
  filters: {
    codeNum(num) {
      if (num === "获取验证码") {
        return num;
      }
      return num + "秒";
    },
  },
  mounted() {
    this.$refs.phone.focus();
  },
};
</script>

<style lang="less" scoped>
.df_login {
  width: 100vw;
  height: 100vh;
  font-size: 0.26rem;
  overflow: hidden;
  background: url("../../assets/image/login/loback.png") no-repeat;
  background-size: 100% 100%;

  .logon_form {
    margin: 2.32rem auto 0 auto;
    display: flex;
    width: 11.4rem;
    height: 6.16rem;
    background: #fff;

    .form_fl {
      width: 6.56rem;

      & > img {
        width: 100%;
      }
    }

    .form_fr {
      // padding: 0 1rem;
      width: 4.86rem;
      font-size: 0.16rem;
      box-sizing: border-box;
      .form_tag {
        display: flex;
        font-size: 0.18rem;
        color: #7076b1;
        text-align: center;
        height: 0.57rem;
        line-height: 0.57rem;
        cursor: pointer;
        & > div {
          flex: 1;
        }
      }
      .curr_form_tag {
        border-bottom: 2px solid #414cc2;
      }
      .fr_pass_con {
        padding: 0 1rem;
      }

      .fr_logo {
        position: relative;
        height: 1.64rem;

        & > img {
          position: absolute;
          left: 50%;
          top: 0.4rem;
          transform: translateX(-50%);
          width: 2.15rem;
          height: 0.58rem;
        }
      }

      .fr_form {
        height: 2.11rem;
        .form_item {
          position: relative;
          padding-left: 0.4rem;
          height: 0.6rem;
          border-bottom: 2px solid #c6c9ec;
          & > img {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            // width: 0.24rem;
            // height: 0.24rem;
          }
          & > input {
            width: calc(100% - 0.44rem);
            position: absolute;
            top: 50%;
            height: 0.4rem;
            transform: translateY(-50%);
            color: #a7abce;
            font-size: 0.16rem;
            border: none;
            outline: none;
          }
        }
        .form_forget {
          display: flex;
          justify-content: space-between;
          height: 0.6rem;
          line-height: 0.6rem;
          color: #b9bcd8;
          .choice {
            display: inline-block;
            width: 0.12rem;
            height: 0.12rem;
            border: 1px solid #a7abce;
            cursor: pointer;
            &:hover {
              border: 1px solid #414cc2;
            }
          }
          img {
            width: 0.16rem;
            cursor: pointer;
          }
        }
      }
      .btn_con {
        padding: 0 1rem;
        .login_btn {
          height: 0.55rem;
          line-height: 0.55rem;
          text-align: center;
          color: #fff;
          font-size: 0.18rem;
          border-radius: 0.27rem;
          background: #414cc2;
          cursor: pointer;
        }

        .register {
          margin-top: 0.5rem;
          text-align: center;
          color: #818182;

          & span:last-child {
            color: #414cc2;
          }
        }
      }
      .phone_login {
        padding: 0 1rem;
        .fr_form {
          & .form_item:nth-child(2) {
            & > input {
              width: 1.4rem;
            }
            & > span {
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              font-size: 0.16rem;
              color: #414cc2;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
